<!--
 * @Author: liuy 208378637@qq.com
 * @Date: 2023-12-21 13:06:49
 * @LastEditors: liuy 208378637@qq.com
 * @LastEditTime: 2023-12-22 22:00:59
 * @FilePath: \front\src\views\moreModal.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <a-button type="primary" @click="showModal">more</a-button>
        <a-modal v-model:open="open" title="教师详情" @ok="handleOk">

            <!-- <template> -->
                <a-table :columns="columns" :data-source="data" bordered>
                    <template #bodyCell="{ column, text, record }">
                        <template v-if="column.dataIndex === 'name'">
                            <a>{{ text }}</a>
                        </template>
                        <template v-if="column.key === 'operation'">
                            <a-space>
                                <replaceAndModal type="primary" @click="replace1(record)" @message="updateParentValue">
                                    显示可以替换的老师
                                </replaceAndModal>
                            </a-space>
                        </template>
                    </template>
                    <!-- <template #title>Header</template>
        <template #footer>Footer</template> -->
                </a-table>
                <!-- <div>
        <replaceModal v-if="open" @updateParentValue="updateParentValue"></replaceModal>
    </div> -->
            <!-- </template> -->

            <!-- <more :moreData="dataSource"></more> -->

        </a-modal>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
// 导入子组件
import replaceAndModal from './replaceAndModal.vue';

const open = ref(false);
const showModal = () => {
    open.value = true;
};

const handleOk = e => {
    console.log(e);
    open.value = false;
};

function setOpen() {
    open.value = !open.value;
}

function replace1(row) {
    index = row.key;
    // setOpen();
    
    console.log("props.moreData: " + props.moreData);
    console.log("moreData: " + props.moreData.key);
    console.log("moreData: " + props.moreData.exam);
    console.log("moreData: " + props.moreData.class);
    console.log("moreData: " + props.moreData.teacher1);
    console.log("moreData: " + props.moreData.teacher2);
    console.log("moreData: " + props.moreData.tag);
}

// 获取父组件数据
const props = defineProps(['moreData']);

let value = ref({});
let index = ref(0);
// 处理子组件传来的数据
const updateParentValue = (newValue) => {
    value = newValue;
    console.log("newValue: " + newValue.key);
    console.log("newValue: " + newValue.name);
    console.log("newValue: " + newValue.organization);
    console.log("newValue: " + newValue.gender);
    updateParent();
    // setOpen();
};

// 向父组件传数据
const emit = defineEmits(['updateParentValue']);
const updateParent = () => {

    data[index-1].name = value.name
    data[index-1].organization = value.organization
    data[index-1].gender = value.gender

    emit('updateParentValue', 'value');
};

// 显示数据
let data = reactive([
    {
        key: '1',
        name: '张三',
        organization: 'XMU',
        gender: '男',
    },
    {
        key: '2',
        name: '李四',
        organization: 'XMU',
        gender: '女',
    },
]);

// 表结构
const columns = [
    {
        title: '姓名',
        dataIndex: 'name',
    },
    {
        title: '单位',
        className: 'column-organization',
        dataIndex: 'organization',
    },
    {
        title: '性别',
        dataIndex: 'gender',
    },
    {
        title: "操作",
        key: 'operation',
    }
];


</script>
<!-- 表格css -->
<style scoped>
th.column-organization,
td.column-organization {
    text-align: right !important;
}
</style>